body {
  width: 50%;
}
header {
  position: sticky;
  top: 0;

  background-color: #fff;
  padding-bottom: 24px;
}
.title-and-search {
  display: flex;
  align-items: center;
}
.title-and-search > h1 {
  width: calc(100% - 300px);
}
.title-and-search > input {
  width: 300px;
  height: 30px;
}

.add-todo-item {
  width: 100%;
  display: flex;
}
.add-todo-item > input {
  width: 100%;
  height: 30px;
}

.show-todo-list {
  margin-top: 24px;
}

caption {
  text-align: left;
}

thead,
tfoot {
  background-color: #f0f0f0;
}

th,
td {
  /* background-color: #e4f0f5; */
  padding: 12px;
  border: 1px solid #c9c9c9;
}

td > button {
  margin-right: 6px;
}

table {
  border-collapse: collapse;
  border: 1px solid #c9c9c9;
  letter-spacing: 1px;

  width: 100%;
}
